<template>
    <mr-page-view class="lock-bar">
        <patt-wrap class="gestures" />
    </mr-page-view>
</template>

<script>
import PattWrap from './ut.vue'
export default {
    name: 'lock',
    components: {
        PattWrap
    }
}
</script>

<style lang="scss" scoped>
@import '../../../src/packages/css/global';
.lock-bar {
    height: 500px;
    color: #ffffff;
    background: radial-gradient(
        ellipse at center,
        #1f3649 0,
        #17253d 44%,
        #040d11 100%
    );
    .gestures {
        @include absoluteCenter();
    }

    .antui-clock {
        position: absolute;
        right: 50px;
        bottom: 50px;
        .date {
            font-size: 20px;
            letter-spacing: 0.3px;
            text-align: right;
        }
        > ul {
            text-align: right;
            list-style: none;
            margin: 0;
            padding: 0;

            > li {
                display: inline;
                font-size: 60px;
                font-weight: 700;

                &.point {
                    padding: 0 4px;
                    animation: 1s ease 0s normal none infinite flash;
                    position: relative;
                    top: -5px;
                }
            }
        }
    }
}
</style>
